import React, { useState, useEffect } from "react";
import axios from "axios";
import Child from "./Child";
export default function App() {
  const [counter, setCounter] = useState(100);
  const [flag, setFlag] = useState(false);
  const [list, setList] = useState([1, 2, 3, 4]);

  // 相当于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    console.log(counter);
  }, [counter]);

  // 1. 初始执行一次
  // 2. 每次依赖项的值变化时执行
  // useEffect(() => {
  //   // 副作用函数的内容
  // }, [依赖项]); //依赖项可以有多个

  useEffect(() => {
    axios.get("http://jsonplaceholder.typicode.com/todos").then((res) => {
      console.log(res);
    });
  }, []);

  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={() => setCounter(counter + 1)}>+</button>

      <hr />
      <div>{flag ? "显示" : "隐藏"}</div>
      <button onClick={() => setFlag(!flag)}>toggle</button>
      <hr />
      <button onClick={() => setList([...list, Date.now()])}>添加</button>
      <div>
        {list.map((item) => {
          return <p key={item}>{item}</p>;
        })}
      </div>
      {flag ? <Child></Child> : "隐藏"}
    </div>
  );
}
